<template>
    <div class='dialog'>
        <div class='newAdd dialog-con modifyShopinfoText'>
            <div class="shoplist">
                <split-vertical title="更新商品信息"></split-vertical>
                <div class="baseinfoTable">
                    <el-form ref="form" :model="form"  label-width="80px" inline label-position="left" >
                        <el-form-item label="品牌" prop='brandName'>
                            <el-input v-model="updateShopInfo.brandName"  placeholder="必输项" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="种类" class="type" prop="productType">
                            <el-select v-model="updateShopInfo.productTypeName" filterable placeholder="请选择" @change="categoryList" disabled>
                                <el-option
                                v-for="item in category"
                                :key="item.id"
                                :label="item.categoryName"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="商品货号" prop="productCode">
                            <el-input v-model.trim="updateShopInfo.productCode"  placeholder="必输项" @blur="getproductCode(form.productCode)" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="商品名称" prop="productName">
                            <el-input v-model="updateShopInfo.productName"  placeholder="必输项" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="单位" prop="productUnit">
                            <el-select v-model='updateShopInfo.productUnitNmae' filterable placeholder="请选择">
                                <el-option 
                                v-for="item in product"
                                :key="item.id"
                                :label="item.value"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="重量(公斤)" prop="productWeight">
                            <el-input v-model="updateShopInfo.productWeight" placeholder="必输项" ></el-input>
                        </el-form-item>
                        <el-form-item label="长(厘米)" prop="length">
                            <el-input v-model="updateShopInfo.length" placeholder="必输项"></el-input>
                        </el-form-item>
                        <el-form-item label="宽(厘米)" prop="width">
                            <el-input v-model="updateShopInfo.width"  placeholder="必输项"></el-input>
                        </el-form-item>
                        <el-form-item label="高(厘米)" prop='height'>
                            <el-input v-model="updateShopInfo.height"  placeholder="必输项"></el-input>
                        </el-form-item>
                        <el-form-item label="条形码" prop='barCode'>
                            <el-input v-model="updateShopInfo.barCode"  placeholder="必输项"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="confirm">
                    <el-button type="primary" @click="confirm" class="btn" size="medium">确定</el-button>
                    <el-button   @click="cancel" size="medium">取消</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

import api from 'js/service'
import SplitVertical from "components/common/SplitVertical"
import {localStorage} from "js/localStorage"
export default {
    inject:['reload'],
    components:{
      SplitVertical
    },
    data(){
        return{
           form:{
                 //品牌编码
                brandCode:'',
                //商品种类
                productType:'',
                //商品货号
                productCode:'',
                //商品名称
                productName:'',
                //单位
                productUnit:'',
                //重量
                productWeight:'',
                //长宽高
                length:'',
                width:'',
                height:'',
                //属性
                productSize:'',
                //颜色
                color:'',
                //性别
                sex:'',
                //容积
                volume:'',
                //材质
                material:'',
                //风格
                style:'',
                //型号
                model:'',
                //厚度
                thickness:'',
                chinese:'',
                english:'',
                man:'',
                woman:'',
                size:'',
            },
            userId:'',
            type:'',
            categoryName:'',
            category:[],
            product:[],
            typeList:[],
          
        }
    },
    created(){
        this.userId=localStorage.get("userID")
        this.init()
    },
    props:{
        updateShopInfo:{},
    },
    methods:{ 
        changeVal(){
            this.$emit('changeVal')
        },
        init(){
            this.productList()
            this.sizeList()
            this.getCategory()
        },
        //商品分类接口
        categoryList(val){
            this.categoryName=''
            let parmas={
               fatherId:val 
            }
            let success=data=>{
               if(data.code=='OK'){
                   this.typeList=data.data
               }else{
                    this.$message.error(data.msg)
                }
            }
            api.getCategory(parmas,success)
        },
        getCategory(){
            let parmas={
               fatherId:0 
            }
            let success=data=>{
               if(data.code=='OK'){
                   this.category=data.data
               }else{
                    this.$message.error(data.msg)
                }
            }
            api.getCategory(parmas,success)
        },
        //单位下拉框
        productList(){
            let parmas={
                fieldCode:'product_unit'
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.product=data.data
                }else{
                    this.$message.error(data.msg)
                }
            }
            api.getValue(parmas,success)
        },
        //尺寸下拉框
        sizeList(){
            let parmas={
                fieldCode:'measure'
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.sizeList=data.data
                }else{
                    this.$message.error(data.msg)
                }
            }
            api.getValue(parmas,success)
        },
        confirm(){
            let parmas={
                brandCode:this.updateShopInfo.brandName,
                productType:this.updateShopInfo.productType,
                categoryName:this.updateShopInfo.categoryName,
                productCode:this.updateShopInfo.productCode,
                productName:this.updateShopInfo.productName,
                productUnit:this.updateShopInfo.productUnit,
                productWeight:this.updateShopInfo.productWeight,
                length:this.updateShopInfo.length ,
                width:this.updateShopInfo.width,
                height:this.updateShopInfo.height,
                barCode:this.updateShopInfo.barCode,
                userId:this.userId,
                id:this.updateShopInfo.id
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.$message.success("保存成功")
                    this.$emit('closeDialog')
                    this.reload()
                }else{
                    this.$message.error(data.msg)
                }
            }
            api.productUpdate(parmas,success)
           
        },
        cancel(){
            this.$emit('closeDialog')
        }
    },                     
}
</script>
<style lang="scss" scoped>
  .modifyShopinfoText{
    width:650px;
    height: 450px;
    .shoplist{
        background:#fff;
        margin-left:25px;
        .newshop{
            height:auto;
            h2{
                font-size: 20px;
                line-height:50px;
                margin-bottom:10px;
            }
        }
        .baseinfoTable{
            height:auto;
            .el-input{
                width:220px;
            }
          .el-select{
            width:220px;
          }
        }
    }
    .confirm{
        text-align:center;
        padding:20px 20px;
        .btn{
          margin-right:20px; 
        }
    }
}
</style>

